<!DOCTYPE html>
<html lang="en" class="mdc-typography">

<head>
  <meta charset="UTF-8">
  <title>Material Design Bottom Navigation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet' href='https://unpkg.com/material-components-web@latest/dist/material-components-web.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Mono'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

<div class="mdc-bottom-navigation mdc-bottom-navigation--shifting">
  <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">tv</span>
          <span class="mdc-bottom-navigation__list-item__text">Movies and TV</span>
        </span>
    <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">music_note</span>
          <span class="mdc-bottom-navigation__list-item__text">Music</span>
        </span>
    <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">book</span>
          <span class="mdc-bottom-navigation__list-item__text">Books</span>
        </span>
    <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" />
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Newstand</span>
        </span>
  </nav>
</div>
  <script src='https://unpkg.com/material-components-web@latest/dist/material-components-web.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>
